<template>
	<class-list-warp>
		<template #title-right>
			<u-tag text="我要约课" mode="dark" shape="circle" @click="showPop()" />
		</template>
		<template #list-item>
			<view class="class-item text-16" v-for="(item,index) in classStore.classListFilter" :key="index" style="position: relative;">
				<view v-if="[1, 2].includes(item.Status)" style="position: absolute; right: 10rpx; top:15rpx;">
					<u-tag text="取消课程" mode="dark" size="mini" type="error" shape="circle" @click="clearClass(item)" />
				</view>
				<view class="class-title">
					{{item.Title}}
					<view>
						<text :class="'tagbase tglstype'+item.LessonType">{{item.LessonTypeText}}</text>
					</view>
					<view> 
						<text :class="'tagbase tgstatus'+item.Status">{{item.StatusTitle}}</text> 
					</view>
				</view>
				<view class="class-time">授课时间：{{item.StudyDay}} {{item.StartTime}} - {{item.EndTime}}</view>
				<view class="class-teacher">授课教师：{{item.TeacherName==null?'未分配':item.TeacherName}}</view>
				<view class="class-room" v-if="[2, 3].includes(item.Status) || (item.Status == 4 && !item.isTimeOut)">
					<view style="flex:1;">
						<view v-if="item.RoomLink==null" style="flex:1;">课程链接：暂无</view>
						<!-- <u-link v-else :href="item.RoomLink" under-line>进入课程</u-link> -->
						<u-tag @click="enterroom(item)" text="进入课程" mode="light" />
					</view>
					<view style="flex:1;">密码：{{item.RoomPwd==null?'暂无':item.RoomPwd}}</view>
				</view>
				<view class="class-evaluate" v-if="item.Status===5">
					<view class="flex" v-if="![null, undefined].includes(item.ToTeacherEvaluateScore)">
						<view class="">对教师的评价：</view>
						<view class="">
							<u-rate :count="5" disabled v-model="item.ToTeacherEvaluateScore"></u-rate>
							<view v-if="item.ToTeacherEvaluateContent">{{item.ToTeacherEvaluateContent}}</view>
						</view>
					</view>
					<template v-else>对教师的评价：</template>
					<u-tag v-if="[null, undefined].includes(item.ToTeacherEvaluateScore)" @click="handleEvaluate(item)" text="评价" mode="light" />
				</view>
				<view class="class-evaluate" v-if="item.Status===5">
					<template v-if="[null, undefined].includes(item.ToStudentEvaluateScore)">
						对学员的评价：暂无
					</template>
					<view class="flex" v-else>
						<view class="">对学员的评价：</view>
						<view class="">
							<u-rate :count="5" disabled v-model="item.ToStudentEvaluateScore"></u-rate>
							<view v-if="item.ToStudentEvaluateContent">{{item.ToStudentEvaluateContent}}</view>
						</view>
					</view>
				</view>
				<view class="class-links">
					<u-link v-if="item.Video!=null" :href="item.Video" class="link-item" under-line>课程回看</u-link>
					<u-link v-if="item.Status>=5" @click="classStore.handleToClassReport(item)" class="link-item" under-line>课堂报告</u-link>
				</view>
			</view> 
		</template>
	</class-list-warp>
	<u-popup v-model="visibleEvaluate" mode="top" height="600rpx" z-index="998">
		<view style="margin-top: 145rpx;padding: 50rpx; display: flex; flex-flow: column; align-items: flex-start;">
			<view  class="mb-5rpx">评价分数</view>
			<u-rate :count="5" v-model="TeacherEvaluateScore"></u-rate>
			<u-input v-model="EvaluateContent" type="textarea" class="w-full mt-16rpx" :border="true" placeholder="请输入评价内容" :height="100" auto-height />
			<u-button class="mt-30rpx w-full" type="primary" @click="handleSetEvaluate">提交</u-button>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import ClassListWarp from './class-list-warp.vue';
	import { useClassStore } from '@/store/class';
	import { TXRoom, ktlapi } from '@/utils';
	
	/** 课程列表：学生 */
	defineOptions({ name: 'class-list-student', inheritAttrs: false });
	
	const classStore = useClassStore();
	const visibleEvaluate = ref(false);
	const hintData = ref(null);
	const TeacherEvaluateScore = ref(0);
	const EvaluateContent = ref('');
	
	function handleEvaluate(item: any){
		hintData.value = item;
		visibleEvaluate.value = true;
	}
	
	function enterroom(item){
		console.log(item);
		TXRoom(item.RoomLink,item.RoomNo,item.RoomPwd);
	}
	
	function handleSetEvaluate(){
		ktlapi({
			action: 'Cus_SetLessonEvaluate',
			data: {
				LessonUUID: hintData.value.UUID,
				Score: TeacherEvaluateScore.value,
				EvaluateContent: EvaluateContent.value,
				Type: 1
			}
		}).then(() => {
			hintData.value.ToTeacherEvaluateScore = TeacherEvaluateScore.value;
			hintData.value.ToTeacherEvaluateContent = EvaluateContent.value;
			visibleEvaluate.value = false;
		})
	}
	
	function showPop() {
		classStore.setPop(true);
	}
	function clearClass(item: any){
		classStore.setActiveItem(item);
		classStore.setCancelLes(true);
	}
</script>

<style lang="scss">
	@import "../styles/class-list.scss";
</style>